<template>
    <div class="app-container">
      <!--工具栏-->
      <div class="head-container">
        <eHeader :dict="dict"  />
        <crudOperation :permission="permission" />
      </div>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column v-if="columns.visible('wxName')" prop="wxName" label="微信名称" width="100"/>
        <el-table-column v-if="columns.visible('phone')" prop="phone" label="手机号" width="100"/>
        <el-table-column v-if="columns.visible('headImage')" prop="headImage" label="头像" width="50">
          <template slot-scope="scope">
            <img class="head-image" :src="scope.row.headImage"/>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('wxGender')" prop="wxGender" label="性别" align="center" width="50">
          <template slot-scope="scope">
            {{scope.row.wxGender==1?'男':'女'}}
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('createTime')" prop="createTime" label="创建日期">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('wxOpenid')" prop="wxOpenid" label="微信opendId"/>
        <el-table-column v-if="columns.visible('wxUnionId')" prop="wxUnionId" label="开放平台ID"/>
        <!--   编辑与删除   -->
        <el-table-column
          v-permission="['admin','job:edit','job:del']"
          label="操作"
          width="130px"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <!--<udOperation-->
              <!--:data="scope.row"-->
              <!--:permission="permission"-->
            <!--/>-->
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
</template>

<style>
.head-image{
  width: 35px;
}
</style>

<script>
  import crudJob from '@/api/system/job'
  import CRUD, { presenter } from '@crud/crud'
  import eHeader from './module/header'
  import crudOperation from '@crud/CRUD.operation'
  import pagination from '@crud/Pagination'
  import udOperation from '@crud/UD.operation'
  // crud交由presenter持有
  const crud = CRUD({
    title: '客户列表',
    url: 'api/customer/back/customer/list',
    sort: ['sort,asc', 'id,desc'],
    optShow: {
      add: false,
      edit: false,
      del: false,
      download: true
    }
  })
    export default {
      components:{
        eHeader,crudOperation,pagination,udOperation
      },
      mixins: [presenter(crud)],
      dicts: ['job_status'],
        data() {
            return {
              permission: {
                add: ['admin', 'job:add'],
                edit: ['admin', 'job:edit'],
                del: ['admin', 'job:del']
              }
            }
        }
    }
</script>
